<template lang="pug">
.game_big_card(@click="ToDetails")
    .card_header_img
        img(:src="ImgSrc")
    .game_card_info
        .game_head {{gi.name}}
        .screenshots
            div(v-for="(item,index) in gi.screenshots.slice(0,4)" :key="index" )
                img(:src="item.path_full" @mouseenter ="ShowMouseoverImg(index)" @mouseleave="ShowMouseleaveImg")

        .game_des
            div Now Available

        .game_price_overview
            .discount_percent(v-show="!gi?.is_free") -{{  gi?.price_overview?.discount_percent}}%
            .discount_final {{  gi?.is_free?" Free To Play " :gi?.price_overview?.final_formatted}}

</template>

<script setup lang="ts">
import type {PropType} from "vue";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import type {GameObj} from "../../../utils/types/Game";

const router = useRouter();


const props = defineProps({
    gi: {
        type: Object as PropType<GameObj>,
        required: false,
    },
})
let ImgSrc = ref<string>("")

const ToDetails = () => {
    const promise = router.resolve({
        name: `game`,
        params: {
            appid: props.gi?.steam_appid,
        }
    });
    window.open(promise.href, '_blank');
    // router.push({
    //     name: `game`,
    //     params: {
    //         appid: props.gi?.steam_appid,
    //     }
    // })
}
const ShowMouseoverImg = (index: number) => {
    ImgSrc.value = props.gi?.screenshots[index].path_full || ""
}

const ShowMouseleaveImg = () => {
    ImgSrc.value = props.gi?.header_image || ""
}


onMounted(() => {
    ImgSrc.value = props.gi?.header_image || ""
})

</script>


<style lang="sass" scoped>
@import "../../../assets/sass/game/bigCard"

</style>
